<template>
  <div class="todo-header">
    <!-- <input 
      type="text"
      placeholder="请输入你的任务名称，按回车键确认" 
      v-model="name"
      @keyup.enter="handleAdd"
    /> -->

    <input 
      type="text"
      placeholder="请输入你的任务名称，按回车键确认" 
      @keyup.enter="handleAdd"
    />
  </div>
</template>

<script>
  import {v4 as uuid} from 'uuid'
  export default {
    name: 'Header',
    methods: {
      // 添加todo的回调函数（通过event读取数据）
      handleAdd(event){
        if(event.target.value.trim()){
          // 把用户输入的内容，包装成一个todo对象
          let obj = {id:uuid(),name:event.target.value.trim(),done:false}
          // 触发Header实例的add-todo事件，目的是：把数据交给App
          this.$emit('add-todo',obj)
          // 清空输入框（此处其实算是在操作DOM）
          event.target.value = ''
        }else{
          alert('输入不能为空！')
        }
      }
    },
  }
</script>

<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>